<template>
	<view>
		<u-navbar :borderBottom="false" back-text=" " :title="title"></u-navbar>
		<view class="connect">
			<view v-if="kor_type == 'kor'" @click="openPop" class="connect_item">
				<view class="item_left">
					<span class="big_title">寄</span>
				</view>
				<view class="item_right">
					<span>{{form.type_name}}</span>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
			</view>
			<view  v-if="kor_type == 'kor'" @click="getSheng" class="connect_item">
				<view class="item_left">
					<span class="big_title">收</span>
					<span class="big_flot">省份</span>
				</view>
				<view class="item_right">
					<span>{{form.city_name}}</span>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
			</view>
			<view v-if="kor_type == 'kor'" @click="kuaiDi_change"  class="connect_item">
				<view class="item_left">
					<span class="big_title">快递选择</span>
				</view>
				<view class="item_right">	
					<span>{{kuaiDiText}}</span>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
			</view>
			<view v-if="kor_type == 'chn'"  class="connect_item">
				<view class="item_left">
					<span class="big_title">寄</span>
				</view>
				<view class="item_right">
					<span>中国</span>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
			</view>
			<view v-if="kor_type == 'chn'"  class="connect_item">
				<view class="item_left">
					<span class="big_title">收</span>
				</view>
				<view class="item_right">
					<span>韩国</span>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
			</view>
			<view v-if="kor_type == 'chn'" @click="type_change"  class="connect_item">
				<view class="item_left">
					<span class="big_title">邮寄方式</span>
				</view>
				<view class="item_right">	
					<span>{{typeText}}</span>
					<image style="width: 21rpx;height: 12rpx; margin-left: 22rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode="widthFix" alt="" />
				</view>
			</view>
			<view class="input_form">
				<view class="form_item" style="border-bottom: 1rpx solid #f9f9f9;">
					<span class="form_title" >包裹重量(KG)</span>
					<input maxlength="8" class="form_input" v-model="form.weight" @blur="inputChange($event , 'weight')"  type="digit" placeholder="包裹重量" />
				</view>
				<view class="form_item" style="border-bottom: 1rpx solid #f9f9f9;">
					<span class="form_title" >包裹尺寸(CM)</span>
				</view>
				<view class="form_size" style="border-bottom: 1rpx solid #f9f9f9;">
					<view class="size_item">
						长
						<view class="input_num">
							<input maxlength="8" v-model="form.long"  @input="inputChange($event , 'long')"  type="digit" placeholder="请输入" />
						</view>
					</view>
					<view class="size_item">
						宽
						<view class="input_num">
							<input maxlength="8" v-model="form.wide" @input="inputChange($event , 'wide')"   type="digit" placeholder="请输入" />
						</view>
					</view>
					<view class="size_item">
						高
						<view class="input_num">
							<input maxlength="8" v-model="form.high" @input="inputChange($event , 'high')" type="digit" placeholder="请输入" />
						</view>
					</view>
				</view>
			</view>
			<view  class="connect_item">
				<view class="item_left">
					<span class="gusuan">运费估算</span>
				</view>
				<view class="item_right">
					<span>{{price?`¥ ${price}`:'请查询'}}</span>
				</view>
			</view>
			
		</view>
		<image v-if="kor_type=='chn'" :src="img_url" style="width: 100%;" mode="widthFix"></image>
		<view style="width: 100%; height: 200rpx;">
				
		</view>
		<view class="button_submit">
			<u-button @click="onSubmit(2)" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">查询</u-button>
		</view>
		<!-- 选择省份 -->
		<u-popup v-model="addressShow" mode="bottom">
			<citySelect :values="value" :isprovince="true"   @change="addressChange" />
		</u-popup>
		<!-- 选择寄件国家 -->
		<u-action-sheet :list="list" @click="onchange" v-model="pop_show"></u-action-sheet>
		<u-action-sheet :list="type_list" @click="typechange" v-model="type_show"></u-action-sheet>
		<!-- 选择快递方式 -->
		<u-action-sheet :list="kuaiDiList" @click="kuaiDiChange" v-model="kuaiDi_show"></u-action-sheet>
	</view>
</template>

<script>
	import citySelect from '@/componts/citySelect/index.vue';
	export default {
		components:{
		    citySelect
		},
		data() {
			return {
				img_url:'',
				type_show:false,
				kuaiDi_show:false,
				price:null,
				pop_show:false,
				addressShow:false,
				title:'运费估测',
				value:[],//選擇的省
				kor_type:'',
				list:[
					{text:'韩国仓库' , type:1},
					{text:'日本仓库' , type:2},
				],
				type_list:[
					{text:'CJ海运' , type:1 , pic:'https://www.mengkahuyu.com/index_png/cj_haiyun.png'},
					{text:'CJ空运' , type:2 , pic:'https://www.mengkahuyu.com/index_png/cj_kongyun.png'},
					{text:'EMS海运' , type:3 , pic:'https://www.mengkahuyu.com/index_png/ems_haiyun.png'},
					{text:'EMS空运' , type:4 , pic:'https://www.mengkahuyu.com/index_png/ems_kongyun.png'},
				],
				kuaiDiList:[
					{text:'圆通快递' , type:1 },
					{text:'顺丰快递' , type:3 },
				],
				typeText:'请选择',
				kuaiDiText:'请选择',
				form:{
					'express_type':'',//快递方式
					'shipment_type':null,
					"city": null, //省的code
					'city_name':'请选择',
					"type": null, //1韩国 2日本
					'type_name':'请选择',
					"long": null, //长
					"wide": null, //宽
					"high": null, //高
					"weight": null //重量
				}
			}
		},
		onShow() {
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
		},
		methods: {
			type_change(){
				this.type_show = true
				
			},
			kuaiDi_change(){
				this.kuaiDi_show = true
			},
			inputChange(e, key){
				this.$nextTick(() => {
				    this.form[key] = this.$geShi(e.detail.value)
				})
			},
			addressChange(e){
				var {name , code} = e[0]
				this.form.city_name = name
				this.form.city = code
				this.addressShow = false
				this.value = e
			},
			getSheng(){
				this.addressShow = true
			},
			onchange(e){
				this.form.type = this.list[e].type
				this.form.type_name = this.list[e].text
			},
			typechange(e){
				this.form.shipment_type = this.type_list[e].type
				this.typeText = this.type_list[e].text
				this.img_url =  this.type_list[e].pic
			},
			kuaiDiChange(e){
				this.form.express_type = this.kuaiDiList[e].type
				this.kuaiDiText = this.kuaiDiList[e].text
			},
			openPop(){
				this.pop_show = true
			},
			onSubmit(){
				var tosat = '请完善信息'
				var isOk = true
				if(this.kor_type=='kor'){	
					delete this.form.shipment_type	
					for(var key in this.form){
						if(!this.form[key]){
							// console.log(key)
							if(key=='type') tosat= '请选择寄件国家'
							if(key=='city') tosat= '请选择收货地区'
							if(key=='weight') tosat = '请输入货物重量'
							if(key=='long') tosat= '请输入货物长度'
							if(key=='wide') tosat= '请输入货物宽度'
							if(key=='high') tosat= '请输入货物高度'
							uni.showToast({
								title:tosat,
								icon:'none'
							})
							return
						}
					}
					this.$wqzApi.freight_estimation(this.form).then(res=>{
						// console.log(res , '返回信息')
						uni.showToast({
							title:'查询成功',
							icon:'none'
						})
						this.price = res.data
					})
				}else{
					for(var key in this.form){
						if(!this.form[key]){
							if(key=='shipment_type') {
								tosat= '请选择寄件方式'
								isOk = false
							}
							if(key=='weight'){
								tosat = '请输入货物重量'
								isOk = false
							} 
							if(key=='long'){
								tosat = '请输入货物长度'
								isOk = false
							} 
							if(key=='wide'){
								tosat= '请输入货物宽度'
								isOk = false
							} 
							if(key=='high'){
								tosat= '请输入货物高度'
								isOk = false
							} 
						}
					}
					if(!isOk){
						uni.showToast({
							title:tosat,
							icon:'none'
						})
						return
					}
					var data = {
						"type": 1, //1韩国
						"shipment_type": this.form.shipment_type, //1cj海运 2cj空运 3EMS空运 4EMS海运
						"long": this.form.long, //长
						"wide": this.form.wide, //宽
						"high": this.form.high, //高
						"weight": this.form.weight //重量
					}
					this.$wqzApi.kor_freight_estimation(data).then(res=>{
						uni.showToast({
							title:'查询成功',
							icon:'none'
						})
						this.price = res.data
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped> 
	@import url(./index.scss);
</style>
